Hero
Homepage Hero (Content Left)
This is the default layout of the homepage hero with the content aligned to the left.
There is a black gradient behind the text to ensure that the text is always accessible regardless of the background image.
View
Challenging. Exceptional. Respected. Online.
Graduate Cretificate in Nonprofit Management and Leadership
Anthony Mallon Ph.D.
Meet Our StaffHTML
<div class="cmp-hero">
<picture>
<source srcset="/images/uga-hero.jpg" media="only screen and (min-width: 2560px)" />
<source srcset="/images/uga-hero.jpg" media="(min-width: 1800px)" />
<source srcset="/images/uga-hero.jpg" media="(min-width: 1200px)" />
<source srcset="/images/uga-hero.jpg" media="(min-width: 768px)" />
<source srcset="/images/uga-hero.jpg" media="(min-width: 480px)" />
<source srcset="/images/uga-hero.jpg" media="(min-width: 0px)" />
<img class="cmp-hero__image" src="/images/uga-hero.jpg" alt="Dr. Anthony (Tony) Mallon"/>
</picture>
<div class="cmp-hero__container">
<div class="cmp-hero__content">
<h2 class="cmp-heading-2" aria-label=
"Challenging. Exceptional. Respected. Online.">Challenging. Exceptional. Respected. Online.</h2>
<p class=" cmp-paragraph util-margin-all-none">Graduate Cretificate in Nonprofit Management and Leadership</p>
<p class=" cmp-paragraph util-margin-all-none">Anthony Mallon Ph.D.</p>
<a href="#" class="cmp-button
cmp-button--border util-margin-top-lg util-margin-top-xl@md">
Meet Our Staff
</a>
</div>
</div>
<div class="cmp-hero__action">
<div class="cmp-hero__action-item">
<button class="cmp-button
cmp-button--full-width cmp-button--has-icon" type="button">
Certificates Online
<svg class="cmp-button__icon cmp-button__icon--right">
<use xlink:href="#icon-arrow-right" />
</svg>
</button>
</div>
<div class="cmp-hero__action-item">
<button class="cmp-button
cmp-button--full-width cmp-button--has-icon" type="button">
Degree Online
<svg class="cmp-button__icon cmp-button__icon--right">
<use xlink:href="#icon-arrow-right" />
</svg>
</button>
</div>
<div class="cmp-hero__action-item">
<button class="cmp-button
cmp-button--full-width cmp-button--has-icon" type="button">
Courses Online
<svg class="cmp-button__icon cmp-button__icon--right">
<use xlink:href="#icon-arrow-right" />
</svg>
</button>
</div>
</div>
</div>Homepage Hero (Content Right)
Homepage hero the can also be aligned to the right by adding a modifier class of .cmp-hero--right to the parent element and .cmp-hero__container--right to the .cmp-hero__container element.
There is a black gradient behind the text to ensure that the text is always accessible regardless of the background image.
View
Challenging. Exceptional. Respected. Online.
Graduate Cretificate in Nonprofit Management and Leadership
Anthony Mallon Ph.D.
Meet Our StaffHTML
<div class="cmp-hero cmp-hero--right">
<picture>
<source srcset="/images/uga-hero.jpg" media="only screen and (min-width: 2560px)" />
<source srcset="/images/uga-hero.jpg" media="(min-width: 1800px)" />
<source srcset="/images/uga-hero.jpg" media="(min-width: 1200px)" />
<source srcset="/images/uga-hero.jpg" media="(min-width: 768px)" />
<source srcset="/images/uga-hero.jpg" media="(min-width: 480px)" />
<source srcset="/images/uga-hero.jpg" media="(min-width: 0px)" />
<img class="cmp-hero__image" src="/images/uga-hero.jpg" alt="Dr. Anthony (Tony) Mallon"/>
</picture>
<div class="cmp-hero__container cmp-hero__container--right">
<div class="cmp-hero__content">
<h2 class="cmp-heading-2" aria-label=
"Challenging. Exceptional. Respected. Online.">Challenging. Exceptional. Respected. Online.</h2>
<p class=" cmp-paragraph util-margin-all-none">Graduate Cretificate in Nonprofit Management and Leadership</p>
<p class=" cmp-paragraph util-margin-all-none">Anthony Mallon Ph.D.</p>
<a href="#" class="cmp-button
cmp-button--border util-margin-top-lg util-margin-top-xl@md">
Meet Our Staff
</a>
</div>
</div>
<div class="cmp-hero__action">
<div class="cmp-hero__action-item">
<button class="cmp-button
cmp-button--full-width cmp-button--has-icon" type="button">
Certificates Online
<svg class="cmp-button__icon cmp-button__icon--right">
<use xlink:href="#icon-arrow-right" />
</svg>
</button>
</div>
<div class="cmp-hero__action-item">
<button class="cmp-button
cmp-button--full-width cmp-button--has-icon" type="button">
Degree Online
<svg class="cmp-button__icon cmp-button__icon--right">
<use xlink:href="#icon-arrow-right" />
</svg>
</button>
</div>
<div class="cmp-hero__action-item">
<button class="cmp-button
cmp-button--full-width cmp-button--has-icon" type="button">
Courses Online
<svg class="cmp-button__icon cmp-button__icon--right">
<use xlink:href="#icon-arrow-right" />
</svg>
</button>
</div>
</div>
</div>Hero Interior Left
This is the default layout of the interior hero with the content aligned to the left. The interior hero the can used by adding a modifier class of .cmp-hero--interior to the parent element.
View
Content Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
HTML
<div class="cmp-hero cmp-hero--interior">
<picture>
<source srcset="/images/uga-hero.jpg" media="only screen and (min-width: 2560px)" />
<source srcset="/images/uga-hero.jpg" media="(min-width: 1800px)" />
<source srcset="/images/uga-hero.jpg" media="(min-width: 1200px)" />
<source srcset="/images/uga-hero.jpg" media="(min-width: 768px)" />
<source srcset="/images/uga-hero.jpg" media="(min-width: 480px)" />
<source srcset="/images/uga-hero.jpg" media="(min-width: 0px)" />
<img class="cmp-hero__image" src="/images/uga-hero.jpg" alt="Dr. Anthony (Tony) Mallon"/>
</picture>
<div class="cmp-hero__container cmp-hero__container--pull-quote">
<div class="cmp-hero__content cmp-hero__content--pull-quote">
<h2 class="cmp-heading-2" aria-label=
"Content Headline">Content Headline</h2>
<div class="util-pad-left-md util-pad-left-none@md">
<p class=" cmp-hero__pull-quote-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="cmp-hero__pull-quote-author">Author Name</p>
</div>
</div>
</div>
</div>Hero Interior Right
The interior hero the can also be aligned to the right by adding a modifier class of .cmp-hero--right to the parent element and .cmp-hero__container--right to the .cmp-hero__container element.
View
Content Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
HTML
<div class="cmp-hero cmp-hero--interior cmp-hero--right">
<picture>
<source srcset="/images/uga-hero.jpg" media="only screen and (min-width: 2560px)" />
<source srcset="/images/uga-hero.jpg" media="(min-width: 1800px)" />
<source srcset="/images/uga-hero.jpg" media="(min-width: 1200px)" />
<source srcset="/images/uga-hero.jpg" media="(min-width: 768px)" />
<source srcset="/images/uga-hero.jpg" media="(min-width: 480px)" />
<source srcset="/images/uga-hero.jpg" media="(min-width: 0px)" />
<img class="cmp-hero__image" src="/images/uga-hero.jpg" alt="Dr. Anthony (Tony) Mallon"/>
</picture>
<div class="cmp-hero__container cmp-hero__container--right cmp-hero__container--pull-quote">
<div class="cmp-hero__content cmp-hero__content--pull-quote">
<h2 class="cmp-heading-2" aria-label=
"Content Headline">Content Headline</h2>
<div class="util-pad-left-md util-pad-left-none@md">
<p class=" cmp-hero__pull-quote-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="cmp-hero__pull-quote-author">Author Name</p>
</div>
</div>
</div>
</div>Hero Without Quote
This hero will only show the image with no text or border. Beginning at 50rem width (the md breakpoint), the image will have a minimum height of 500px.
View
HTML
<div class="cmp-hero cmp-hero--noquote">
<picture>
<source srcset="/images/uga-hero.jpg" media="only screen and (min-width: 2560px)" />
<source srcset="/images/uga-hero.jpg" media="(min-width: 1800px)" />
<source srcset="/images/uga-hero.jpg" media="(min-width: 1200px)" />
<source srcset="/images/uga-hero.jpg" media="(min-width: 768px)" />
<source srcset="/images/uga-hero.jpg" media="(min-width: 480px)" />
<source srcset="/images/uga-hero.jpg" media="(min-width: 0px)" />
<img class="cmp-hero__image" src="/images/uga-hero.jpg" alt="Dr. Anthony (Tony) Mallon"/>
</picture>
</div>